<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">待审核变更申请</h3>
                  <div class="box-tools pull-right">
                    <!-- <el-button type="success" @click="showQuery">
                              <i class='fa fa-search'>高级查询</i>
                            </el-button >
                            <el-button type="primary" @click='()=>isExport = true'>
                              <i class='fa fa-cloud-download'>导出当前结果</i>
                            </el-button> -->
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="approvals">
                    <div class="row">
                      <el-table stripe :sort-change="sortChanged" :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="approvals" border style="width: 100%">
                        <el-table-column fixed type='index' label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column fixed="right" label="操作" width="320">
                          <template scope="scope">
                            <el-button type="success" @click="view(scope.row)">
                              <i class="fa fa-eye">查 看</i>
                            </el-button>
                            <el-button type="primary" v-if="hasRole(2)" @click="editRow(scope.row)">
                              <i class="fa fa-edit">审 核</i>
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title='变更详情' v-if="viewVisible" :before-close="()=>viewVisible = false" :visible.sync="viewVisible" top='10px' width="80%" :modal="false" size="small">
      <Diff v-if='viewVisible' ref='diffCtrl' @viewDataChanged="onViewDataChanged" :dffers='differs'></Diff>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title='用户信息' v-if="viewUserVisible" :before-close="()=>viewUserVisible = false" :visible.sync="viewUserVisible" top='10px' width="80%" :modal="false" size="large">
      <UserDataView v-if='viewUserVisible' :editable='false' ref='userView' :userData='selectedUser'></UserDataView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewUserVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title='审核处理' v-if='editVisible' :visible.sync="editVisible" :before-close="() => editVisible = false" :modal="false" size="large">
      <ApproveHandle :editable='true' v-if='editVisible' ref='ApproveHandleEdit' :approval='selectedApproval'></ApproveHandle>
      <span slot="footer" class="dialog-footer">
        <el-button @click="()=>editVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title='人事基础信息' :visible.sync="viewbaseInfoVisible" :before-close="()=>viewbaseInfoVisible = false" top='10px' width="80%" :modal="false" size="large">
      <UserInfo :editable='false' v-if='viewbaseInfoVisible' ref='userView' :userInfo='data'></UserInfo>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewbaseInfoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
        <el-dialog title='人事补充信息' :visible.sync="viewextraInfoVisible" :before-close="()=>viewextraInfoVisible = false" :modal="false" size="full">
            <ExtraInfo ref='extraView' :editable='false' v-if='viewextraInfoVisible' :extrainfo='data'></ExtraInfo>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewextraInfoVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='在职进修学历(学位)教育' :visible.sync="viewcontinueTrainVisible"  :before-close="()=>viewcontinueTrainVisible = false" :modal="false" size="large">
            <FurtherEdu :editable='false' v-if='viewcontinueTrainVisible' ref="furtherEdu" v-bind:educations="data"></FurtherEdu>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewcontinueTrainVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='年度考核管理' :visible.sync="viewannualAssessmentVisible" :before-close="()=>viewannualAssessmentVisible = false"  :modal="false" size="large">
            <KPI  ref='kpiView' v-if='viewannualAssessmentVisible' :editable='false' :kpis='data'></KPI>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewannualAssessmentVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='查看专业技能管' :visible.sync="viewtechnicalPositionVisible" :before-close="()=>viewtechnicalPositionVisible = false" :modal="false" size="large">
            <ProfessionTech v-if='viewtechnicalPositionVisible' :editable='false' ref='view' :professionTechs="data"></ProfessionTech>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewtechnicalPositionVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='参与工程项目建设情况管理' :visible.sync="viewprojectsVisible" :before-close="()=>viewprojectsVisible = false" :modal="false" size="large">
            <Project :editable='false' v-if='viewprojectsVisible' ref='race' :projects='data'></Project>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewprojectsVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='参加活动(竞赛)情况管理' :visible.sync="viewtakePartVisible" :before-close="()=>viewtakePartVisible = false"  :modal="false" size="large">
            <Race ref='race' v-if='viewtakePartVisible' :editable='false' :races='data'></Race>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewtakePartVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='家庭及主要社会关系' :visible.sync="viewsocialReltaionVisible" :before-close="()=>viewsocialReltaionVisible = false" :modal="false" size="large">
            <Social ref='socialView' :editable='false' :relations='data'></Social>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewsocialReltaionVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title='在职培训' :visible.sync="viewonlineWorkVisible" :before-close="()=>viewonlineWorkVisible = false" :modal="false" size="large">
            <Training ref="trainingView" v-if='viewonlineWorkVisible' :editable='false' v-bind:trainings="data"></Training>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewonlineWorkVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
  import approveUtils from "../../common/approveUtils";
  import Utils from "../../common/utils";
  import Diff from "../mycomponents/approve/Diff";
  import ApproveHandle from "../mycomponents/approve/ApproveHandle";
  import UserDataView from "./UserDataView";
  import UserInfo from '../mycomponents/users/UserInfo'
  import Training from '../mycomponents/users/Training'
  import ExtraInfo from '../mycomponents/users/ExtraInfo'
  import Mywizard from '../mycomponents/wizards/MyWizard'
  import Social from '../mycomponents/users/Social'
  import FurtherEdu from '../mycomponents/users/FurtherEdu'
  import ProfessionTech from '../mycomponents/users/ProfessionTech'
  import Race from '../mycomponents/users/Race'
  import Project from '../mycomponents/users/Project'
  import KPI from '../mycomponents/users/KPI'
  let approveUtil = new approveUtils();
  let util = new Utils();
  export default {
    name: "Approvals",
    components: {
      ApproveHandle,
      UserDataView,
      Diff,
      UserInfo,
      ExtraInfo,
      Social,
      Training,
      FurtherEdu,
      ProfessionTech,
      Race,
      Project,
      KPI
    },
    data: function() {
      return {
        name: "",
        userInfo:{},
        extrainfo:{},
        parttimeEdus:[],
        kpis:[],
        professionTechs:[],
        projects:[],
        races:[],
        relations:[],
        trainings:[],
        data:null,
        viewbaseInfoVisible:false,
        viewextraInfoVisible:false,
        viewcontinueTrainVisible:false,
        viewannualAssessmentVisible:false,
        viewtechnicalPositionVisible:false,
        viewprojectsVisible:false,
        viewtakePartVisible:false,
        viewsocialReltaionVisible:false,
        viewonlineWorkVisible:false,
        viewUserVisible: false,
        editVisible: false,
        viewVisible: false,
        columns: approveUtil.getCloumns(),
        emptyText: "空",
        id: "id",
        approvals: [],
        total: 1,
        selectedApproval: null,
        selectedUser: util.getDefaultSelectedUser(),
        differs: null
      };
    },
    created: function() {
      this.$nextTick(() => {
        this.getApprovals();
      });
    },
    methods: {
      getEmptyText() {
        return "空";
      },
      showQuery() {
        this.queryVisible = true;
      },
      view(row) {
        console.log("view data:" + JSON.stringify(row));
        this.getApproval(row.id);
        this.process();
        this.showViewDlg();
      },
      showViewDlg() {
        if (this.selectedApproval.type == 0) {
          this.viewUserVisible = true
        } else if (this.selectedApproval.type == 1) {
          this.viewVisible = true
        }
      },
      process() {
        if (this.selectedApproval) {
          // 新增用户
          if (this.selectedApproval.type == 0) {
            var dbData = JSON.parse(this.selectedApproval.content);
            this.selectedUser.data.id = dbData.id;
            this.selectedUser.data.kpis = dbData.annualAssessment;
            this.selectedUser.data.professionTechs = dbData.technicalPosition;
            this.selectedUser.data.parttimeEdus = dbData.continueTrain;
            this.selectedUser.data.trainings = dbData.onlineWork;
            this.selectedUser.data.relations = dbData.socialReltaion;
            this.selectedUser.data.extrainfo = dbData.otherInfo;
            this.selectedUser.data.userInfo = dbData.baseInfo;
            this.selectedUser.data.projects = dbData.projects;
            this.selectedUser.data.races = dbData.takePart;
            this.differs == null;
          } else if (this.selectedApproval.type == 1) {
            // 变更用户
            var differs = JSON.parse(this.selectedApproval.differs);
            var necesaryData = []
            for(var index in differs){
              if(!(differs[index].field == 'otherInfo' 
                  || differs[index].field == 'resume'
                  || differs[index].field == 'parttimeEdus')){
                necesaryData.push(differs[index])
              }
            }
            console.log('differs:'+JSON.stringify(necesaryData))
            this.differs = necesaryData
          } else {
            // 删除用户
            var that = this
            var userId = this.selectedApproval.content
            util.getUserData(userId,
            (response)=>{
              util.parseData(response.body.body, that.selectedUser.data,that)
              that.viewUserVisible = true
            },(response)=>{
              that.showErrorInfo("加载数据失败,请重试!")
            })
          }
        }
      },
      editRow(row) {
        console.log("edit data:" + JSON.stringify(row));
        this.getApproval(row.id);
        this.process();
        this.editVisible = true;
      },
      sortChanged(sortProp) {
        //this.queryData.orders.fields = sortProp.prop
        //this.queryData.orders.desc = sortProp.order
      },
      getApproval(id) {
        for (var index in this.approvals) {
          if (this.approvals[index].id == id) {
            this.selectedApproval = this.approvals[index];
            break;
          }
        }
        if (!this.selectedApproval) {
          this.showErrorInfo("数据不存在，请刷新!");
        }
      },
      getApprovals() {
        var that = this;
        approveUtil.getUserApprovals(
          response => {
            if (response.body.result == 1) {
              console.log(
                "get approvals data id " + JSON.stringify(response.body)
              );
              that.approvals = response.body.body;
            } else if (response.body.result == 2) {
              that.showErrorInfo("权限不够,请联系管理员!");
            }
          },
          response => {
            console.log("get approvals failed:" + response.data);
            that.showErrorInfo("网络异常,请稍后重试!");
          }
        );
      },
      showSucInfo(info) {
        this.$message({
          message: info,
          type: "info"
        });
      },
      showErrorInfo(info) {
        this.$message({
          message: info,
          type: "error"
        });
      },
      hasRole(role) {
        return (this.$store.state.user.role.roles & role) == role;
      },
      onViewDataChanged(data){
        console.log('view data changed:'+JSON.stringify(data))
        this.data = data.data
        this[data.propName] = true
      },
      submit() {
        var approval = this.$refs.ApproveHandleEdit.getData();
        var that = this;
        if (approval) {
          if (approval.state == 1) {
            approveUtil.agree(
              approval,
              response => {
                if (response.body.result == 1) {
                  that.editVisible = false;
                  that.showSucInfo("操作成功!");
                  that.getApprovals();
                } else {
                  that.showErrorInfo("操作失败,请稍后重试!");
                }
              },
              response => {
                that.showErrorInfo("操作失败,请稍后重试!");
              }
            );
          } else {
            approveUtil.reject(
              approval,
              response => {
                if (response.body.result == 1) {
                  that.editVisible = false;
                  that.showSucInfo("操作成功!");
                  that.getApprovals();
                } else {
                  that.showErrorInfo("操作失败,请稍后重试!");
                }
              },
              response => {
                that.showErrorInfo("操作失败,请稍后重试!");
              }
            );
          }
        }
      }
    }
  };
</script>

<style>

</style>
